import Taro, { Component } from "@tarojs/taro";
import { connect } from "@tarojs/redux";
import _isEmpty from 'lodash/isEmpty'
import { View, Input, Text } from '@tarojs/components';
import { AtTextarea, AtInputNumber } from 'taro-ui'
import { getPublicData } from '@/actions/common';

import UploadImg from '@/components/UploadImg';
import RowTip from '@/components/RowTip'
import BaseButton from '@/components/BaseButton'
import GTagList from '@/components/GTagList'

import warn_img from '@/assets/icon_warn.png'
import './index.scss';

@connect(({ common }) => ({
  common
}))
class GoodsInfo extends Component {

  config = {
    navigationBarTitleText: '货物信息'
  };

  constructor(props) {
    super(props);
    const initState = {
      goodsName: '',    // 品名
      goodsTypeCode: '',  // 货物类型code
      goodsTypeCn: '普货',    // 货物类型中文
      goodsNum: 0,    // 件数
      goodsWeight: 0, // 重量
      goodsBulk: 0, // 物品体积
      goodsLength: '',  // 物品长度
      goodsWidth: '', //  物品宽度
      goodsHeight: '', // 物品高度
      orderRemark: '',  // 备注信息
      orderImages: '', // 图片
      goodsTypes: [],
      traType: '',
      carryType: '',

    }
    this.state = initState
    this.initState = initState
  }

  componentDidMount(){
    const gInfo = Taro.getStorageSync('traffic_goods_info')
    if(gInfo){
      this.setState({
        ...gInfo.goods,
        orderRemark: gInfo.orderRemark,
        orderImages: gInfo.orderImages,
      }, () => {

        this.handleJudgeCarryGoods(this.state.goodsWeight, this.state.goodsBulk)
      })
    }
    const { dispatch } = this.props
    const traType = this.$router.params.type
    const isAir = traType==='air_traffic'
    dispatch(getPublicData({
      type: isAir ? 'air_goods_type': 'line_type',
    }, (data) => {
      let list = data 
      list = list.map(ld => {
        if(isAir){
          if(ld.code !== 'ph_air'){
            ld.checked = true
          }
        }else{
          if(ld.code !== 'ph_line'){
            ld.checked = true
          }
        }
        return ld
      })
      this.setState({ 
        goodsTypes: list, 
        traType,
        goodsTypeCode: isAir ? 'ph_air' : 'ph_line'
      })
    }))
  }

  componentWillReceiveProps(next){
    const { order: { carryGoods } } = next
    this.setState({ carryType: carryGoods || '' })
  }

  componentWillUnmount(){
    const initState = this.initState
    this.setState({
      ...initState
    })
  }

  render() {
    const { goodsNum, goodsBulk, goodsWeight, goodsWidth, goodsHeight, goodsLength, goodsTypeCode, orderRemark, orderImages, goodsTypes, goodsName, traType, carryType} = this.state;
    
    const isAir = traType === 'air_traffic'
    const overWeight = isAir && goodsWeight > 0 && goodsNum > 0 && goodsWeight/goodsNum > 80 

    return (
      <View className="goods-info-page">
        <View className='goods-content'>
          <View className='goods-content-row'>
            <View className='goods-content-row-title'>品名</View>
            <Input
              className="goods-content-row-input"
              placeholder="请输入物品名称"
              value={goodsName}
              onChange={(e) => {
                this.setState({ goodsName: e.detail.value })
              }}
            ></Input>
          </View>

          <View className='goods-content-row goods-row-between'>
            <View className='goods-content-row-title row-title-long'>物品类型</View>
            <RowTip text='了解禁运品' color='#FF5D24' size={10} onClick={() => this.jump2detail('forbid')}/>
          </View>
  
          {!_isEmpty(goodsTypes) && <GTagList data={goodsTypes} value={goodsTypeCode} onClick={(gt) => {
            this.setState({ 
              goodsTypeCode: gt.code,
              goodsTypeCn: gt.name, 
            })
          }}/>}
  
          {isAir && <RowTip text='目前不支持生鲜物品运输,电子产品不能含有锂电池' color='#FF5D24' img={warn_img}/>}

          <View className='goods-content-row'>
            <View className='goods-content-row-title'>件数</View>
            <View className='goods-content-row-right'>
              <AtInputNumber className='goods-content-row-number' min={0} max={99999999} width={240} value={goodsNum} onChange={this.goodsNumInput}/>
              <Text>件</Text>
            </View>
          </View>
          <View className='goods-content-row'>
            <View className='goods-content-row-title'>重量</View>
            <View className='goods-content-row-right'>
              <AtInputNumber className='goods-content-row-number' min={0} max={99999999} width={240} value={goodsWeight} onChange={this.goodsWeightInput}/>
              <Text>kg</Text>
            </View>
          </View>
          {overWeight && <RowTip text='单件重量可能超过80kg，请注意' color='#FF5D24' img={warn_img}/>}
          {isAir && <RowTip text='注：单件重量超过80kg，需额外收取超重费' /> }
          
          <View className='goods-content-row'>
            <View className='goods-content-row-title'>体积</View>
            <View className='goods-content-row-right'>
              <AtInputNumber className='goods-content-row-number' min={0} max={99999999} width={240} value={goodsBulk} onChange={this.goodsBulkInput}/>
              <Text>m³</Text>
              
            </View>
            {traType === 'special_line_traffic' && carryType && <RowTip text={`货物为${carryType}`} color='#FF5D24' />}
          </View>
          {/* {traType === 'air_traffic' && <RowTip text='体积超过最大体积上限' color='#FF5D24' />} */}

          <View className='goods-volume'>
            <View className='goods-volume-item'>
              <Input type='number' placeholder='长' value={goodsLength} onInput={this.goodsLengthInput} onBlur={this.inputBlur} onFocus={this.inputFocus}></Input>
              <Text>cm</Text>
            </View>
            <View className='goods-volume-item'>
              <Input type='number' placeholder='宽' value={goodsWidth} onInput={this.goodsWidthInput} onBlur={this.inputBlur} onFocus={this.inputFocus}></Input>
              <Text>cm</Text>
            </View>
            <View className='goods-volume-item'>
              <Input type='number' placeholder='高' value={goodsHeight} onInput={this.goodsHeightInput} onBlur={this.inputBlur} onFocus={this.inputFocus}></Input>
              <Text>cm</Text>
            </View>
          </View>
          <RowTip text='注：填写单件最大体积的长、宽、高'/>

          <UploadImg star={true} title='物品照片' images={orderImages} onSelect={this.selectImages} />
          <RowTip text='注：货物照片为货物全貌、单张照片、特征照片'/>

          <View className='goods-content-row'>
            <View className='goods-content-row-title row-title-long'>备注信息</View>
          </View>
          <AtTextarea className='goods-content-desc' placeholder='请输入备注信息（货物包装方式）' height={140} value={orderRemark} rows={4} onChange={this.orderRemarkInput.bind(this)} onBlur={this.intputBlur} onFocus={this.inputFocus} onBlur={this.inputBlur} onFocus={this.inputFocus}></AtTextarea>          
        </View>
        <BaseButton cls='info-submit-btn btn-bottom' text='确定' type='primary' width='90%' onClick={() => this.handleSaveGoodsInfo()}/>
      </View>
    )
  }

  handleJudgeCarryGoods = (weight, bulk) =>{
    const { dispatch } = this.props
    const { traType } = this.state
    if(traType === 'special_line_traffic'){
      const params = {
        type: 'special',
        weight: weight,
        volume: bulk
      }
    }
  } 
  

  orderRemarkInput = (e) => {
    this.setState({ orderRemark: e })
  }

  selectImages = (imgs) =>{
    this.setState({ orderImages: imgs})
  }

 

  goodsLengthInput = (e) => { 
    this.setState({ goodsLength: e.detail.value })
  }

  goodsWidthInput = (e) => { 
    this.setState({ goodsWidth: e.detail.value })
  }

  goodsHeightInput = (e) => { 
    this.setState({ goodsHeight: e.detail.value })
  }
}


export default GoodsInfo